   
<!-- Then put toasts within -->
<div class="toast-container position-absolute top-0 end-0 p-3">
  <!-- Здесь будут отображаться уведомления -->
</div>


<script src="{{ config.ASSETS_ROOT }}/plugins/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect(window.location.protocol+'//' + document.domain + ':' + location.port);

  socket.on('connect', function() {
      console.log('Connected to server');
      subscribe();
  });

  socket.on('disconnect', function() {
      console.log('Disconnected from server');
  });

  socket.on('message', function(msg) {
      var messages = document.getElementById('messages');
      var message = document.createElement('div');
      message.textContent = msg;
      messages.appendChild(message);
  });

  socket.on('changeProperty', function(msg) {
      const elements = document.querySelectorAll(`[id^="prop:${msg.property}"]`);
      elements.forEach(element => {
        element.textContent = msg.value;
      });
  });
  socket.on('changeObject', function(msg) {
      console.log("change objects", msg)
      var element = document.getElementById("obj:"+msg.object);
      if (element) {
        element.innerHTML = msg.value;
      }
      else
        console.log("not found object")
  });

  function formatTime(number) {
    return number < 10 ? '0' + number : number;
  }

  // Функция для отображения уведомлений
  function showNotification(data) {
    let now = new Date();
    let hours = formatTime(now.getHours());
    let minutes = formatTime(now.getMinutes());
    let seconds = formatTime(now.getSeconds());

    const toast = `
      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"  data-bs-delay="10000">
        <div class="toast-header">
          <span class="badge rounded-pill bg-warning text-dark me-3">${data.level}</span>
          <strong class="me-auto">Say</strong>
          <small>${hours}:${minutes}:${seconds}</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          ${data.message}
        </div>
      </div>
    `;
    const toastContainer = document.querySelector('.toast-container');
    toastContainer.innerHTML += toast;
    $(document).ready(function() {
        $(".toast").toast('show');
    });
    setTimeout(() => {
      toastContainer.removeChild(toastContainer.querySelector('.toast'));
    }, 11000);
  }

  // Обработка события при получении уведомления от сервера
  socket.on('say', function(data) {
    console.log("SAY",data)
    showNotification(data);
  });

  function setProperty(name, value){
    socket.emit('setProperty', name, value);
  }

  function callMethod(name){
    socket.emit('callMethod', name);
  }

  function subscribe(){
      var elements = document.querySelectorAll('[id^="prop:"]');
      var propList = [];
      elements.forEach(function(element) {
            var idWithoutProp = element.id.slice(5); // cut "prop:"
            propList.push(idWithoutProp);
      });
      console.log(propList);
      elements = document.querySelectorAll('[id^="obj:"]');
      var objectList = [];
      elements.forEach(function(element) {
            var idWithoutProp = element.id.slice(4); // cut "prop:"
            objectList.push(idWithoutProp);
      });
      console.log(objectList);
      // subscribe
      if (propList.length > 0)
        socket.emit('subscribeProperties', propList);
      if (objectList.length > 0)
        socket.emit('subscribeObjects', objectList);
  }

  document.addEventListener('DOMContentLoaded', function() {
      //subscribe()
  });
</script>